<%@ page import="com.onlinevideo.entity.Category" %>
<%@ page import="com.onlinevideo.entity.Video" %>
<%@ page import="com.onlinevideo.service.impl.CategoryServiceImpl" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../static/fonts/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/user.css"/>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="../static/js/bootstrap.min.js" type="text/javascript"></script>
    <%

        List<Video> videos = (List<Video>) session.getAttribute("videos");
        Integer tpg = (Integer) session.getAttribute("count");
        Integer pageSize = (Integer) session.getAttribute("pageSize");
        Integer pageNo = (Integer) session.getAttribute("pageNo");
        String category = (String) session.getAttribute("category");
        String videoName = (String) session.getAttribute("videoName");
        if (videos == null||tpg==null||pageNo==null||pageSize==null) {
            response.sendRedirect("../video.do?action=getVideoListQueryLikeByCondition");
            return;
        }
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        int i1 = tpg/pageSize;
        tpg = tpg%pageSize==0? i1:i1+1;
    %>
    <script type="text/javascript">
        $(function () {
            var $inputGroupSuccess1 = $("#inputGroupSuccess1");
            $inputGroupSuccess1.val(<%="\""+("%".equals(videoName)?"":videoName)+"\""%>)

            $("#search").click(function () {
                var val = $inputGroupSuccess1.val();
                $.ajax({
                    url: "../video.do",
                    type: "GET",
                    data: {
                        "videoName": val,
                        "action": "getVideoListQueryLikeByCondition"
                    },
                    success: function (data) {
                        var location = window.location;
                        location.href = data;

                        location.reload();

                    }
                });
            });

            $(".videoPlay").click(function (event) {
                /*event.preventDefault();
                var videoId = $(this).attr("data-id");
                $.ajax({
                    url: "../video.do",
                    type: "post",
                    data: {
                        "videoId": videoId,
                        "action": "play"
                    },
                    success: function (data) {
                        console.log(data)
                    }
                });*/
            });
        });
    </script>
</head>
<body>
<jsp:include page="header.jsp"/>
<div class="container" style="margin-top: 100px">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div class="form-group has-success has-feedback">
                <label class="control-label" for="inputGroupSuccess1">在线视频</label>
                <div class="input-group" style="height: 40px">
                    <input style="height: 100%" type="text" class="form-control" id="inputGroupSuccess1"
                           aria-describedby="inputGroupSuccess1Status">
                    <span class="input-group-addon" id="search">搜索</span>
                </div>
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>
    <div class="row" style="background-color:white;">
        <div>

            <div class="centerbox-nav">
                <ul>
                    <li><a href="<%=request.getContextPath()+"/video.do?action=getVideoListQueryLikeByCondition&videoName="+videoName%>" data-id="3">全部</a></li>
                    <%
                        CategoryServiceImpl categoryService = new CategoryServiceImpl();
                        List<Category> categories = categoryService.queryAll();
                        for (Category c:categories) {
                    %>
                    <li><a href="<%=request.getContextPath()+"/video.do?action=getVideoListQueryLikeByCondition&category="+c.getId()+"&videoName="+videoName%>" data-id="3"><%=c.getCategoryName()%></a></li>
                    <%
                        }
                    %>
                </ul>
            </div>

            <div class="opus">
                <%
                    for (Video v : videos) {
                        Date date = new Date();
                        String uploadTime = v.getUploadTime();
                        if (uploadTime == null) {
                            uploadTime = String.valueOf(0);
                        }
                        long time = Long.parseLong(uploadTime);
                        date.setTime(time);
                %>
                <div class="col-md-3 col-sm-4" style="height: 250px">
                    <div style="background-color:#dddddd;margin: 10px">
                        <a  href="<%=request.getContextPath()+"../video.do?action=play&videoId="+v.getId()%>">
                            <img src="<%=request.getContextPath()+v.getVideoImg()%>" alt="" style="height: 150px!important;width: 100%!important">
                        </a>
                        <span style="font-size: 20px"><%=v.getVideoName()%></span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span style="position: absolute;">收藏：<%=v.getCollectionCount()%></span>
                        <br>
                        <span><%=simpleDateFormat.format(date)%></span>&nbsp;&nbsp;&nbsp;&nbsp;<span>播放量:<%=v.getPlayTotalCount()%></span>
                    </div>
                </div>
                <%
                    }
                %>

            </div>

        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3">
        <div class="col-md-12">
            <nav>
                <ul class="pagination">
                    <%
                        int begin = 1;
                        //t表示显示当页前后的条数
                        int t = 2;
                        //n表示一次能显示的总页数
                        int n = 2 * t + 1;
                        int length;

                        //如果不是第一页，就添加上一页按钮
                        if (pageNo > 1) {%>
                    <li class="disabled">
                        <a id="lasta"
                           href="<%=request.getContextPath() + "/video.do?pageNo=" + (pageNo-1) + "&action=getVideoListQueryLikeByCondition&category="+category+"&videoName="+videoName%>"
                           aria-label="Previous">
                            <span aria-hidden="true" id="lasts">
                                &laquo;
                            </span>
                        </a>
                    </li>
                    <%
                        }

                        if (tpg < n) {
                            length = tpg;
                        } else {
                            length = n;
                            if (pageNo - t > 0 && pageNo + t <= tpg) {
                                begin = pageNo - t;
                            } else if (pageNo - t <= 0) {
                            } else if (pageNo + t > tpg) {
                                begin = tpg - n + 1;
                            }
                        }
                        for (int i = begin; i < length + begin; i++) {
                            if (i == pageNo) {
                    %>
                    <li class="active"><a href="#"><%=i%><span class="sr-only"></span></a></li>
                    <%} else {%>
                    <li>
                        <a id="ts" data-value="<%=i%>" href="<%=request.getContextPath() + "/video.do?pageNo=" + i + "&action=getVideoListQueryLikeByCondition&category="+category+"&videoName="+videoName%>"><%=i%>
                            <span class="sr-only"><%=i%></span></a></li>
                    <%
                            }
                        }
                        //如果不是最后一页，就添加下一页按钮
                        if (pageNo < tpg) {
                    %>
                    <li class="disabled">
                        <a id="nexta"
                           href="<%=request.getContextPath() + "/video.do?pageNo=" + (pageNo+1) + "&action=getVideoListQueryLikeByCondition&category="+category+"&videoName="+videoName%>"
                           aria-label="Previous">
                            <span aria-hidden="true" id="nexts">
                                &raquo;
                            </span>

                        </a>

                    </li>
                    <%
                        }
                    %>
                </ul>
            </nav>
        </div>
        <span class="be-pager-total" style="margin-left: 30px">共 * 页，</span>
        <span class="be-pager-options-elevator">跳至<input type="text" class="space_input"> 页</span><button>跳转</button>
    </div>
    <div class="col-md-3"></div>
</div>
<div style="height: 10px"></div>
<jsp:include page="footer.jsp"/>
</body>
</html>
